<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>

<p hidden>
    kebab-case 烤串命名      camelCase 驼峰命名     PascalCase 帕斯卡命名
    !!!!!!!!!!!!!!!!!!自己的测试结果 使用时  只有烤串命名 可以成功调用

    kebab-case
    camelCase 或 kebab-case (如果组件已经被定义为 camelCase)
    kebab-case、camelCase 或 PascalCase (如果组件已经被定义为 PascalCase)




    这意味着 PascalCase 是最通用的声明约定 而 kebab-case 是最通用的使用约定。

</p>

<div id="app">
    <!-- 在 HTML 模板中始终使用 kebab-case -->
    <kebab-cased-component></kebab-cased-component>
    <camel-cased-component></camel-cased-component>
    <pascal-cased-component></pascal-cased-component>

    <hr>

    <kebab-cased-component></kebab-cased-component>

    <camel-cased-component></camel-cased-component>
    <camelCasedComponent></camelCasedComponent>

    <pascal-cased-component></pascal-cased-component>
    <pascalCasedComponent></pascalCasedComponent>
    <PascalCasedComponent></PascalCasedComponent>

</div>



<script>

    new Vue({
        el: "#app",
        components: {
            // 使用 kebab-case 注册
            'kebab-cased-component': {
                template: '<p>1</p>'
            },
            // 使用 camelCase 注册
            'camelCasedComponent': {
                template: '<p>12</p>'
            },
            // 使用 PascalCase 注册
            'PascalCasedComponent': {
                template: '<p>123</p>'
            }
        }
    })

</script>

</body>
</html>